<template>
  <div id="Replace">
    <!-- <h1>代下订单</h1> -->
    <el-row id="reprow">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark step">
          <el-steps :active="step" simple>
            <el-step title="步骤 1" icon="el-icon-picture"></el-step>
            <el-step title="步骤 2" icon="el-icon-edit"></el-step>
            <el-step title="步骤 3" icon="el-icon-upload"></el-step>
          </el-steps></div
      ></el-col>
    </el-row>
    <!-- 搜索 -->
    <el-row v-if="step == 1">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark select">
          <el-input
            placeholder="请输入内容"
            v-model="typevalue"
            class="input-with-select"
          >
            <el-select v-model="floorType" slot="prepend" placeholder="请选择">
              <el-option label="住宅" value="1"></el-option>
              <el-option label="商铺" value="2"></el-option>
              <el-option label="写字楼" value="3"></el-option>
            </el-select>
            <el-button
              class="selectBut"
              slot="append"
              icon="el-icon-search"
              @click="select"
            ></el-button>
          </el-input></div
      ></el-col>
    </el-row>
    <!-- 显示图片 -->
    <el-row v-if="step == 1" :gutter="20" id="picter">
      <el-col :span="6" v-for="item in exhibitData" :key="item.average_price"
        ><div class="grid-content bg-purple picter">
          <img
            src="../assets/images/p1.jpg"
            alt=""
            min-width="250px"
            height="150px"
            id="pictuer"
          />
          <p>{{ item.real_estate_name }}</p>
          <p>均价：{{ item.average_price }}</p>
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-circle-check"
              v-if="item.status == 1"
              >活动楼盘</el-button
            >
            <el-button type="primary" @click="next(item.real_estate_id)"
              >下单<i class="el-icon-circle-plus-outline"></i
            ></el-button>
          </el-button-group>
        </div>
      </el-col>
    </el-row>
    <!-- 步骤2 -->
    <el-row v-if="step == 2" id="step2">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark">
          <el-divider content-position="center">优惠券</el-divider>
          <ul class="myul">
            <li
              class="myli"
              v-for="item in couponDdata"
              :key="item.real_estate_id"
              @click="youhui(item.real_estate_id)"
              :style="{
                background: colorid == item.real_estate_id ? 'red' : '',
              }"
            >
              {{ item.event_title }}
            </li>
          </ul>
          <el-divider content-position="center">买家姓名</el-divider>
          <div class="myul mydiv">
            <el-input
              placeholder="请输入买家姓名"
              v-model="myname"
              class="name"
            >
              <i slot="suffix" class="el-icon-user el-input__icon"></i>
            </el-input>
            <p>非常重要，身份验证需要，请填写与证件号码一致的真实姓名</p>
          </div>
          <el-divider content-position="center">身份证号</el-divider>
          <div class="myul mydiv">
            <el-input
              placeholder="请输入身份证号"
              v-model="cardid"
              class="name"
              @input="yanzhencard"
            >
              <i slot="suffix" class="el-icon-s-order el-input__icon"></i>
            </el-input>
            <p v-if="cardidStatus" style="color: red; font: 12px">
              输入身份证不正确
            </p>
            <p>非常重要，身份验证需要，请填写与证件号码一致的真实姓名</p>
          </div>
          <el-divider content-position="center">手机号码</el-divider>
          <div class="myul mydiv">
            <el-input
              placeholder="请输入手机号码"
              v-model="phone"
              class="name"
              @input="yanzhenphone"
            >
              <i slot="suffix" class="el-icon-mobile el-input__icon"></i>
            </el-input>
            <p v-if="phoneStatus" style="color: red; font: 12px">
              输入手机号不正确
            </p>
            <p>非常重要，用于接收电子优惠券短信</p>
          </div>
          <el-divider content-position="center">支付方式</el-divider>
          <div class="myul mydiv">
            <el-radio v-model="radio" label="1">现金支付</el-radio>
            <el-radio v-model="radio" label="2">POSS刷卡</el-radio>
          </div>
          <el-divider content-position="center">流水号</el-divider>
          <div class="myul mydiv">
            <el-input placeholder="请输入流水号" v-model="myid" class="name">
              <i slot="suffix" class="el-input__icon el-icon-date"></i>
            </el-input>
            <p>如果是现金支付，建议填写收据编号</p>
          </div>
          <div class="myul mydiv">
            <el-button type="success" @click="save">保存</el-button>
            <el-button type="info" @click="quxiao">取消</el-button>
          </div>
        </div></el-col
      >
    </el-row>
    <!-- 步骤3 -->
    <el-row v-if="step == 3">
      <el-col :span="24"
        ><div class="grid-content bg-purple-dark step3">
          <i class="el-icon-success save-success"></i>

          <el-link type="primary" @click="quxiao">下单成功，点击返回</el-link>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script scoped>
import "element-ui/lib/theme-chalk/index.css";
import * as api from "../utils/api";
export default {
  name: "Replace",
  data() {
    return {
      colorid: "",
      floorType: "",
      typevalue: "",
      myid: "",
      step: 1,
      myname: "",
      cardid: "",
      radio: "1",
      phone: "",
      cardidStatus: false,
      phoneStatus: false,
      exhibitData: [],
      couponDdata: [],
    };
  },
  methods: {
    select() {
      let real_estatename = this.typevalue;
      console.log(real_estatename);
      console.log(123);
      this.axios({
        method: "get",
        url: api.SELECTFLOORBYNAME1,
        params: { real_estate_name: real_estatename },
      }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.exhibitData = data.data.data;
        }
      });
    },
    next(id) {
      // console.log(123456);
      console.log(id);
      this.step = 2;
      this.axios({
        method: "get",
        url: api.SELECTPROMODATA,

        params: {
          real_estate_id: id,
        },
      })
        .then((data) => {
          console.log(data);
          this.couponDdata = data.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    save() {
      if (this.radio == 1) {
        this.radio = "现金支付";
      } else {
        this.radio = "POSS刷卡";
      }
      let arr = {
        ID_number: this.cardid,
        buyer_name: this.myname,
        group_purchase_discount_id: this.colorid,
        payment_method: this.radio,
        phone_number: this.phone,
        serial_no: this.myid,
      };
      console.log(arr);
      this.axios({
        method: "post",
        url: api.ADDODERSHELP,
        data: {
          ID_number: this.cardid,
          buyer_name: this.myname,
          group_purchase_discount_id: this.colorid,
          payment_method: this.radio,
          phone_number: this.phone,
          serial_no: this.myid,
        },
      }).then((data) => {
        console.log(data);
        if (data.data.code == 200) {
          this.step = 3;
        }
      });
    },
    quxiao() {
      this.step = 1;
    },
    youhui(id) {
      // console.log(id);
      this.couponDdata.forEach((item, i) => {
        if (id == item.real_estate_id) {
          this.colorid = id;
          //   console.log(this);
        }
      });
    },
    /* 验证身份证 */
    yanzhencard() {
      if (
        this.cardid.length != 18 &&
        !/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(
          this.cardid
        )
      ) {
        this.cardidStatus = true;
      } else {
        this.cardidStatus = false;
      }
    },
    /* 验证手机号 */
    yanzhenphone() {
      if (
        this.phone.length != 11 &&
        !/^[1][3,4,5,7,8][0-9]{9}$/.test(this.phone)
      ) {
        this.phoneStatus = true;
      } else {
        this.phoneStatus = false;
      }
    },
    /* 打开页面时，请求数据 */
    /* selectFloorshow() {
      this.axios({
        method: "get",
        url: api.FLOORSHOWSELECT,
        params: {},
      })
        .then((data) => {
          console.log(data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {
    this.selectFloorshow();
  }, */
  },
};
</script>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}

.bg-purple-light {
  background: #e5e9f2;
}
.select {
  border-radius: 4px;
  min-height: 80px;
  text-align: center;
  line-height: 80px;
  /* background: #51e623; */
}
.picter {
  border-radius: 4px;
  min-height: 300px;
  text-align: center;
}
.el-select .el-input {
  width: 100px;
}
.input-with-select .el-input-group__prepend {
  background-color: #ffffff;
}
.el-input-group__append {
  background-color: #51e623;
}
.el-input-group {
  width: 500px;
}
.el-icon-search {
  color: #ffffff;
}
.el-steps--simple {
  background-color: #d3dce6;
}
#pictuer {
  margin-top: 20px;
  border-radius: 10px;
}
.myul {
  /* background: #1ec0ff; */
  min-width: 500px;
  max-width: 1000px;
  min-height: 100px;
  margin: 0 auto;
}
.myli {
  list-style: none;
  float: left;
  height: 50px;
  width: 200px;
  background-color: darksalmon;
  margin-right: 20px;
  margin-top: 10px;
  line-height: 50px;
  cursor: pointer;
  text-align: center;
}
.name {
  width: 400px;
}
.mydiv {
  text-align: center;
}
.mydiv > p {
  font-size: 12px;
}
#step2 {
  background-color: #e5e9f2;
}
.save-success {
  font-size: 50px;
  color: #1ec0ff;
  line-height: 300px;
}
.step3 {
  width: 100%;
  height: 100%;
  text-align: center;
}
.el-steps--simple {
  background-color: #d2f6c5 !important;
}
#Replace {
  width: 98%;
  margin: 0 auto;
}
#reprow {
  margin-top: 10px;
}
</style>